<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row class="search-input">
          <el-form-item label="类目名称：">
            <el-input v-model="filters.name" placeholder="类目树名称"/>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!--表格内容栏-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date1" label="类目编号"></el-table-column>
      <el-table-column prop="date2" label="类目名称"></el-table-column>
      <el-table-column prop="date3" label="类目图片"></el-table-column>
      <el-table-column prop="date4" label="类目序号"></el-table-column>
      <el-table-column prop="date5" label="状态"></el-table-column>
      <el-table-column
        fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.limit"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <!--新增界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="40%"
      height="800px"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="120px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        :inline="true"
      >
        <el-row class="searchDialog-input">
          <el-form-item label="ID：" prop="id" v-if="false">
            <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入ID"></el-input>
          </el-form-item>
          <el-form-item label="类目名称：" prop="name">
            <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入类目树名称"></el-input>
          </el-form-item>
          <el-form-item label="类目图片：" prop="categoryCode">
            <el-input v-model="dataForm.categoryCode" auto-complete="off" placeholder="请输入类目树编码"></el-input>
          </el-form-item>
          <el-form-item label="类目序号：" prop="thirdCode">
            <el-input v-model="dataForm.thirdCode" auto-complete="off" placeholder="请输入第三方系统编码"></el-input>
          </el-form-item>
          <el-form-item label="类目状态：" prop="type">
            <el-select v-model="dataForm.type" placeholder="类型" style="width:200px">
              <el-option label="启用" value="1" ></el-option>
              <el-option label="禁用" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button :size="size" @click.native="addDialogVisible = false">{{ $t("action.cancel") }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{ $t("action.submit") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/ProductCategoryTable";
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      KtButton,
      CyTable,
    },
    data() {
      return {
        tableData:[
          {
            date1: 'A0001',
            date2: '直播课程',
            date3: 'https://item.jd.com/57652399059.html#crumb-wrap',
            date4: '1',
            date5: '启用',
          }, {
            date1: 'A0002',
            date2: '文章课程',
            date3: 'https://item.jd.com/57652399059.html#crumb-wrap',
            date4: '2',
            date5: '启用',
          }, {
            date1: 'A0003',
            date2: '视频课程',
            date3: 'https://item.jd.com/57652399059.html#crumb-wrap',
            date4: '3',
            date5: '禁用',
          },
        ],

        size: "small",
        filters: {
          name: "",
        },
        totalSize: 3,
        pageResult: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        editLoading: false,
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, //编辑界面是否显示
        addDialogVisible: false, //新增界面是否显示
        dataFormRules: {
          name: [{required: true, message: "请输入类目名称", trigger: "blur"}],
          categoryCode: [
            {required: true, message: "请输入类目树编码", trigger: "blur"}
          ]
        },
        // 新增编辑界面数据
        dataForm: {
          id: "",
          name: "",
          categoryCode: "",
          thirdCode: "",
          type: "2"
        }
      };
    },
    mounted() {

    },
    methods: {

      // 批量删除
      handleDelete: function (data) {
        let param = {};
        param.id = data.params[0].id;
        this.utils.request.deleteProductCategory(param, data.callback);
      },
      // 显示新增界面
      handleAdd: function () {
        this.addDialogVisible = true;
        this.operation = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
        });
      },
      // 显示编辑界面
      handleEdit: function (params) {
        this.$router.push({
          path: "/ProductCategoryEdit" + "/" + params.row.id + "/" + params.row.type
        });
      },
      // 编辑
      submitForm: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let params = Object.assign({}, this.dataForm);
              var this_ = this;
              this.utils.request.saveProductCategory(params, function (res) {
                if (res.code == "0000") {
                  this_.$message({message: "操作成功", type: "success"});
                  this_.$refs["dataForm"].resetFields();
                  this_.addDialogVisible = false;
                  this_.findPage(null);
                  this_.isAddAfterCategory()
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            });
          }
        });
      },
      // 重置
      resetForm(formName) {
        this.filters = {
          name: "",
          shop_id: "",
          status: ""
        };
        this.findPage();
      },
      // 每页数据刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;

      },
      // 每页条数刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
      },
    }
  };
</script>

<style scoped lang='scss'>
</style>
